/**
 * Created by qiangqiang on 2016/12/10.
 * Updated by Tsuna Cheung on 2016-12-15
 */
import React, {Component} from 'react';
import {
    Text,
    Image,
    View,
    StyleSheet,
    TouchableOpacity,
    TextInput
} from 'react-native';

import Header from '../component/HeaderWithoutBack';

export default class Record extends Component {
    constructor(props) {
        super(props);
        this.state = {
            display: false,
            flex1: 1.5,
            flex2: 4
        };
    }

    changeState = () => {
        this.setState({
            display: !this.state.display,
            flex1: 4,
            flex2: 1.5
        })
    }

    changeBack = () => {
        this.setState({
            display: !this.state.display,
            flex1: 1.5,
            flex2: 4
        })
    }

    render() {
        return (
            <View style={styles.container}>
                <Header name="记录"/>

                <View style={styles.body}>
                    <View style={styles.body_photo_layout}>
                        <View style={styles.body_photo}>
                            <Image style={styles.img}
                                   source={require('../Images/Yahoo_Messenger.png')}/>
                        </View>
                    </View>

                    <View style={styles.body_text1}>
                        <Text style={styles.body_text1_font1}>
                            今日目标
                        </Text>

                        <Text style={styles.body_text1_font2}>
                            完成数据解析，完成数据库操作
                        </Text>
                    </View>

                    <View style={[styles.body_text2, {flex: this.state.flex1}]}>
                        <Text style={styles.body_text1_font1}>
                            自我评价
                        </Text>

                        {
                            this.state.display == false ?
                                (<View>
                                    <TouchableOpacity onPress={this.changeState}>
                                        <Text style={styles.body_tex2_submit}>
                                            填写
                                        </Text>
                                    </TouchableOpacity>
                                </View>)
                                :
                                (<View style={{flex: 3}}>
                                    <TextInput
                                               multiline={true}
                                               style={styles.body_textInput}>
                                    </TextInput>

                                    <View style={styles.body_tex2_twoBtn}>
                                        <TouchableOpacity onPress={this.changeBack}>
                                            <Text style={styles.body_tex2_submit}>
                                                收起
                                            </Text>
                                        </TouchableOpacity>

                                        <TouchableOpacity>
                                            <Text style={styles.body_tex2_submit}>
                                                提交
                                            </Text>
                                        </TouchableOpacity>
                                    </View>
                                </View>)
                        }
                    </View>

                    <View style={{flex: this.state.flex2}}>
                    </View>
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#ffffff"
    },
    body: {
        flex: 10,
    },
    body_photo_layout: {
        flex: 3,
        justifyContent: "center",
        alignItems: "center"
    },
    body_photo: {
        borderWidth: 1,
        borderColor: "#CACACA",
        width: 100,
        height: 100,
        justifyContent: "center",
        alignItems: "center",
        marginTop: 35
    },
    img: {
        width: 95,
        height: 95
    },
    body_photo_font: {
        fontSize: 15
    },
    body_text1: {
        marginTop: 35,
        flex: 1.5,
        justifyContent: "center",
        borderBottomWidth: 1,
        borderTopWidth: 1,
        borderColor: "#CACACA"
    },
    body_text1_font1: {
        marginTop: 10,
        marginLeft: 15,
        fontSize: 15,
        flex: 1
    },
    body_text1_font2: {
        marginLeft: 30,
        fontSize: 14,
        flex: 1
    },
    body_text2: {
        borderBottomWidth: 1,
        borderColor: "#CACACA"
    },
    body_textInput: {
        flex: 2,
        borderWidth: 1,
        borderColor: "#CACACA",
        marginLeft: 15,
        marginRight: 15,
        textAlignVertical:"top"
    },
    body_tex2_submit: {
        textAlign: "right",
        marginRight: 15,
        marginBottom: 10
    },
    body_tex2_twoBtn: {
        flexDirection: "row",
        justifyContent: "flex-end",
        marginTop: 5
    }
});